import React, {Component} from 'react';
import Avatar from 'material-ui/Avatar';
import Divider from 'material-ui/Divider';
import FontIcon from 'material-ui/FontIcon';

import { moment } from '../Utils/Helper';

export default class ChatList extends Component {
  render() {
    let styles = {
      box: {
        position: 'relative',
        overflow: 'hidden',
        width: '100%',
        marginTop: 6,
        marginBottom: 6,
        paddingTop: 6,
        paddingBottom: 6
      },
      content: {
        position: 'relative',
        fontWeight: 300,
        lineHeight: 1.428,
        marginLeft: 12,
        marginRight: 12,
        maxWidth: '65%',
        padding: 12,
        color: this.props.isCurrentUser ? '#fff' : 'rgba(0, 0, 0, 0.87)',
        borderRadius: 2,
        backgroundColor: this.props.isCurrentUser ? '#00BCD4' : '#EEEEEE',
      },
      time: {
        padding: 24,
        fontSize: 12,
        textAlign: 'center'
      }
    };

  	return (
	  	<div style={styles.box}>
        {this.props.createdAt ? 
          <div style={styles.time}>{this.props.createdAt}</div> : ''
        }
        <Avatar 
          src={this.props.userImg}
          className={this.props.isCurrentUser ? 'pull-right' : 'pull-left'}
        />
        <div 
          style={styles.content} 
          className={this.props.isCurrentUser ? 'chat-content pull-right' : 'chat-content-normal pull-left'}
        >
          {this.props.detail}<br/>
        </div>
      </div>
  	);
  }
};
